.grid { display:grid}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}
.grow-1 { flex-grow: 1;}
.justify-center { justify-content: center;}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.text-center {
    text-align: center;
}
.text-red-400 { color:oklch(70.4% 0.191 22.216);}
.text-green-600 { color:oklch(62.7% 0.194 149.214);}
.text-blue-500 { color:oklch(62.3% 0.214 259.815);}
.text-error { color:$uni-color-error;}
.text-sm { font-size:$uni-font-size-sm;}
.text-base { font-size:$uni-font-size-base;}
.text-lg { font-size:$uni-font-size-lg;}
.font-bold { font-weight: bold;}
.font-normal { font-weight: normal;}
.font-medium { font-weight: 500;}
.h-screen { height: calc(100vh - 100px)}
.lh-lg { line-height: 2 * $uni-font-size-base;}
.bg-primary { background-color: $uni-color-primary;}

@for $n from 1 to 8 {
	
	.text-h#{$n} {
		font-size: (8 - $n) * $uni-spacing-col-sm;
	}
	
	.grid-col-#{$n} {
		grid-template-columns: repeat($n, minmax(0, 1fr));
	}
	
	.gap-#{$n} {
		gap: $n * $uni-spacing-col-sm;
	}
	
    .m-#{$n} {
        margin: $n * $uni-spacing-col-sm;
    }

    .mx-#{$n} {
        margin-left: $n * $uni-spacing-col-sm;
        margin-right: $n * $uni-spacing-col-sm;
    }

    .my-#{$n} {
        margin-top: $n * $uni-spacing-col-sm;
        margin-bottom: $n * $uni-spacing-col-sm;
    }

    .ms-#{$n} {
        margin-left: $n * $uni-spacing-col-sm;
    }

    .me-#{$n} {
        margin-right: $n * $uni-spacing-col-sm;
    }

    .mt-#{$n} {
        margin-top: $n * $uni-spacing-col-sm;
    }

    .mb-#{$n} {
        margin-bottom: $n * $uni-spacing-col-sm;
    }

    .p-#{$n} {
        padding: $n * $uni-spacing-col-sm;
    }

    .px-#{$n} {
        padding-left: $n * $uni-spacing-col-sm;
        padding-right: $n * $uni-spacing-col-sm;
    }

    .py-#{$n} {
        padding-top: $n * $uni-spacing-col-sm;
        padding-bottom: $n * $uni-spacing-col-sm;
    }

    .ps-#{$n} {
        padding-left: $n * $uni-spacing-col-sm;
    }

    .pe-#{$n} {
        padding-right: $n * $uni-spacing-col-sm;
    }

    .pt-#{$n} {
        padding-top: $n * $uni-spacing-col-sm;
    }

    .pb-#{$n} {
        padding-bottom: $n * $uni-spacing-col-sm;
    }
}
